<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/static/home/css/style.css">
</head>
<body>
{include file="/index/head"/}
<section class="color-scheme--scheme-1">
  <div class="product">
    <div class="product-gallery">
      <!-- 主图展示区 -->
      <div class="product-gallery__media">
        <img src="{$goods.image}" alt="主图" class="main-image active">
        <!-- 其他主图（隐藏） -->
        {volist name="goods.images" id="value"}
        <img src="{$value.image}" class="main-image">
        {/volist}
        {volist name="goods.attrkey" id="value"}
        {volist name="value.value_list" id="item"}
        {notempty name="item.image"}
        <img src="{$item.image}" class="main-image">
        {/notempty}
        {/volist}
        {/volist}
      </div>
      <!-- 缩略图导航区 -->
      <div class="thumbnail-wrapper">
        <div class="thumbnail-container">
          <button class="product-gallery__thumbnail" data-index="0">
            <img src="{$goods.image}" class="object-contain">
          </button>
          {volist name="goods.images" id="value" key="vo"}
          <button class="product-gallery__thumbnail" data-index="{$vo}">
            <img src="{$value.image}" class="object-contain">
          </button>
          {/volist}
          {volist name="goods.attrkey" id="value" key="keys"}
          {volist name="value.value_list" id="item" key="index"}
          {notempty name="item.image"}
          <button class="product-gallery__thumbnail" data-index="{$vo + $index}">
            <img src="{$item.image}" class="object-contain">
          </button>
          {/notempty}
          {/volist}
          {/volist}
        </div>
      </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const thumbnails = document.querySelectorAll('.product-gallery__thumbnail');
            const mainImages = document.querySelectorAll('.main-image');
            const thumbnailContainer = document.querySelector('.thumbnail-container');
            const prevBtn = document.querySelector('.thumbnail-prev');
            const nextBtn = document.querySelector('.thumbnail-next');
            let currentIndex = 0;
            const thumbnailWidth = thumbnails[0].offsetWidth + 10; // 包括gap
            const visibleThumbnails = Math.floor(thumbnailContainer.parentElement.offsetWidth / thumbnailWidth);
            const totalThumbnails = 8; // 原始缩略图数量
            // 初始化
            updateMainImage(currentIndex);
            updateActiveThumbnail(currentIndex);
            centerThumbnail(currentIndex);

            // 缩略图点击事件
            thumbnails.forEach((thumbnail) => {
                thumbnail.addEventListener('click', function() {
                    const index = parseInt(this.dataset.index);
                    if (index !== currentIndex) {
                        currentIndex = index;
                        updateMainImage(currentIndex);
                        updateActiveThumbnail(currentIndex);
                        centerThumbnail(currentIndex);
                    }
                });
            });

            // 上一张按钮
            prevBtn.addEventListener('click', function() {
                currentIndex = (currentIndex - 1 + totalThumbnails) % totalThumbnails;
                updateMainImage(currentIndex);
                updateActiveThumbnail(currentIndex);
                centerThumbnail(currentIndex);
            });

            // 下一张按钮
            nextBtn.addEventListener('click', function() {
                currentIndex = (currentIndex + 1) % totalThumbnails;
                updateMainImage(currentIndex);
                updateActiveThumbnail(currentIndex);
                centerThumbnail(currentIndex);
            });

            // 更新主图
            function updateMainImage(index) {
                mainImages.forEach(img => img.classList.remove('active'));
                mainImages[index].classList.add('active');
            }

            // 更新活动缩略图
            function updateActiveThumbnail(index) {
                thumbnails.forEach(thumb => thumb.classList.remove('active'));
                // 更新所有对应索引的缩略图
                document.querySelectorAll(`.product-gallery__thumbnail[data-index="${index}"]`).forEach(thumb => {
                    thumb.classList.add('active');
                });
            }

            // 居中当前缩略图
            function centerThumbnail(index) {
                // 计算真实位置（考虑复制的缩略图）
                const realPosition = index + 2; // 前面复制了2个
                const targetPosition = -realPosition * thumbnailWidth + thumbnailContainer.parentElement.offsetWidth / 2 - thumbnailWidth / 2;

                thumbnailContainer.style.transform = `translateX(${targetPosition}px)`;

                // 检查是否需要无缝跳转
                setTimeout(() => {
                    if (index === 0) {
                        // 如果是第一个，跳转到真实第一个（视觉上看不出变化）
                        const jumpPosition = -2 * thumbnailWidth + thumbnailContainer.parentElement.offsetWidth / 2 - thumbnailWidth / 2;
                        thumbnailContainer.style.transition = 'none';
                        thumbnailContainer.style.transform = `translateX(${jumpPosition}px)`;
                        setTimeout(() => {
                            thumbnailContainer.style.transition = 'transform 0.5s ease';
                        }, 50);
                    } else if (index === totalThumbnails - 1) {
                        // 如果是最后一个，跳转到真实最后一个
                        const jumpPosition = -(totalThumbnails + 1) * thumbnailWidth + thumbnailContainer.parentElement.offsetWidth / 2 - thumbnailWidth / 2;
                        thumbnailContainer.style.transition = 'none';
                        thumbnailContainer.style.transform = `translateX(${jumpPosition}px)`;
                        setTimeout(() => {
                            thumbnailContainer.style.transition = 'transform 0.5s ease';
                        }, 50);
                    }
                }, 500);
            }

            // 响应窗口大小变化
            window.addEventListener('resize', function() {
                centerThumbnail(currentIndex);
            });
        });
    </script>
    <div class="product-info">
      <div class="product-info__block-list">
        <div class="product-info__block-item">
          <h1 id="goods-title">{$goods.name}</h1>
        </div>
        <div class="product-info__block-item">
          <span class="text-subdued">{$goods.keywords}</span>
        </div>
        <div class="product-info__block-item">
          <span>{$goods.info}</span>
        </div>
        <div class="product-info__block-item">
          <hr>
        </div>
        <!-- sku -->
        <div class="product-info__block-item">
          <div class="variant-picker">
            {volist name="goods.attrkey" id="value" key="keys"}
            <div class="variant-picker__option">
              <span class="variant-picker__option-info">{$value.name}:</span>
            </div>
            <div class="variant-picker__option-values">
              {volist name="value.value_list" id="item" key="index"}
              <input checked class="sr-only" type="radio" value="{$item.name}" name="option_values_{$keys}" id="option_values_{$item.id}">
              {notempty name="item.image_id"}
              <label for="option_values_{$item.id}" class="thumbnail-swatch">
                <img src="{$item.image}" id="option_img_{$item.id}" width="100%">
              </label>
              {else}
              <label for="option_values_{$item.id}" class="block-swatch">{$item.name}</label>
              {/notempty}
              {/volist}
            </div>
            {/volist}
          </div>
        </div>
        <!-- 库存 -->
        <div clsas="product-info__block-item">
          <span class="inventory text-success">In stock</span>
        </div>
        <!-- 加减数量 -->
        <div class="product-info__block-item">
          <div class="quantity">
            <div id="product_input-sub">-</div>
            <input min="1" max="99" id="product_input" type="text" value="2">
            <div id="product_input-add">+</div>
          </div>
        </div>
        <!-- 加减数量 -->
        <script>
            const product_input_sub = document.querySelector("#product_input-sub");
            const product_input_add = document.querySelector("#product_input-add");
            let product_input = document.querySelector("#product_input")
            product_input_sub.addEventListener("click", function() {
                if (product_input.value > 1) {
                    product_input.value--
                }
            })
            product_input_add.addEventListener("click", function() {
                if (product_input.value < 99) {
                    product_input.value++
                }
            })
        </script>
        <!-- 添加购物车 -->
        <div class="product-info__block-item">
          <button class="AddToCart">
            ADD TO CART
          </button>
        </div>
        <!-- 折叠框 -->
        <div class="product-info__block-item">
          <div class="accordion">
            <div class="accordion-item">
              <input type="checkbox" id="section1" class="accordion-input">
              <label for="section1" class="accordion-label">Features</label>
              <div class="accordion-content">
                {$goods.info}
              </div>
            </div>

            <div class="accordion-item">
              <input type="checkbox" id="section2" class="accordion-input">
              <label for="section2" class="accordion-label">Spec and Installation Guide</label>
              <div class="accordion-content">
                <a href="javascript:;">Milan Installation Guide</a>
              </div>
            </div>
          </div>
        </div>
        <div class="product-info__block-item">
          <div class="description">
            <strong>Dimensions</strong>
            <br>
            <span>• Vanity: 58-3/8″ W x 18-1/16″ D x 17-5/8″ H</span>
            <br>
            <span>• Vanity: 58-3/8″ W x 18-1/16″ D x 17-5/8″ H</span>
            <br>
            <span>• Vanity: 58-3/8″ W x 18-1/16″ D x 17-5/8″ H</span>
          </div>
        </div>
      </div>
    </div>
    <div class="product-extra-information">
      <div class="pair-well-products">
        <div class="horizontal-product-card">
          <a href="" class="horizontal-product-card_img">
            <img src="./static/upload/image/20250714/C041818.webp" alt="">
          </a>
          <div class="horizontal-product-card__info">
            <div class="horizontal-product-card__info_item">
              <a href="">Ceramic Basin Top-Mount Rectangular</a>
              <a href="">Login to see price</a>
            </div>
            <button class="AddToCart">
              ADD TO CART
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="base" id="cartDialog">
      <div class="mask"></div>
      <div class="content">
        <header>
          <div>
            CART
          </div>
          <div id="closeDialog">
            X
          </div>
        </header>
        <main>
          <div class="cart-drawer__items">
            <div class="cart-drawer__items">

            </div>
          </div>
          <script>
              const cart_input_sub = document.querySelectorAll(".cart_input-sub");
              const cart_input_add = document.querySelectorAll(".cart_input-add");
              let cart_input = document.querySelectorAll(".cart_input");
              console.log(cart_input_sub)
              for (const i in cart_input_sub) {
                  let row = cart_input_sub[i];
                  let row2 = cart_input_add[i];
                  row.addEventListener("click", function() {
                      if (cart_input[i].value > 1) {
                          cart_input[i].value--
                      }
                  });
                  row2.addEventListener("click", function() {
                      if (cart_input[i].value < 99) {
                          cart_input[i].value++
                      }
                  })
              }
          </script>
        </main>
        <footer>
          <strong>ADD PO Number</strong>
          <input type="text" value="" placeholder="Add Po Number">
          <div>
            <strong>Note:</strong>
            <span>Please enter your PO Box number in the field above before proceeding to checkout.</span>
          </div>
          <div class="button-group">
            <a href="/cart.html" class="button-grup-item">VIEW CART</a>
            <button class="button-grup-item">CHECKOUT</button>
          </div>
        </footer>
      </div>
    </div>
  </div>
</section>
<!-- 页面 -->
<script>
    const addToCart = document.querySelector(".AddToCart");
    let cartDialog = document.querySelector("#cartDialog");
    addToCart.addEventListener("click", function() {
        let id,item,value,image,src = '',arr = [];
        for (let i=0;i < 50;i++){
            item = document.querySelectorAll("input[name=option_values_" + i + "]");
            if (item.length > 0){
                value = document.querySelector('input[name="option_values_' + i + '"]:checked');
                image = document.getElementById(value.id.replace('values','img'));
                console.log(image);
                if (image) src = image.src;
                id = value.id.replace('option_values_','');
                arr.push(value.value);
            }
        }
        let attr = arr.join('|');
        let items = document.querySelector('.cart-drawer__items');
        let product_input = document.getElementById('product_input').value;
        arr = localStorage.getItem('cart_list');
        // console.log(arr);
        // arr = [];
        if (!arr)arr = [];
        else arr = JSON.parse(arr);
        arr.push({id:id,attr:attr,number:product_input,image:src,title:document.getElementById('goods-title').innerText});
        console.log(arr);
        localStorage.setItem('cart_list',JSON.stringify(arr));
        let html = '';
        items.innerHTML = '';
        arr.forEach((item,index) => {
            html += '<div class="cart-drawer__item" style="gap: 20px;">';
            html += '<img src="' +  item.image + '" style="width:120px;height:120px">';
            html += '<div class="line-item-info">';
            html += '<div class="line-item-info-item">';
            html += '<a href="">' + item.title + '</a>';
            html += '<a href="">' + item.attr + '</a>';
            html += '</div>';
            html += '<div>';
            // html += '<span class="smallcaps">48 Inch / Matte Grey</span>';
            html += '</div>';
            html += '<div class="cart-quantity">';
            html += '<div class="quantity">';
            html += '<div class="cart_input-sub">-</div>';
            html += '<input class="cart_input" type="text" value="' + item.number + '">';
            html += '<div class="cart_input-add">+</div> ';
            html += '</div>';
            html += '<div class="remove">Remove</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
        });
        items.innerHTML = html;
        cartDialog.style.display = "block";
    });
</script>
<script>
    const closeDialog = document.querySelector("#closeDialog");
    closeDialog.addEventListener("click", function() {
        cartDialog.style.display = "none";
    })
</script>

</body>

</html>